@charset "utf-8";
/* CSS Document */

/*加载开始动画=======================================================================================================================================================================*/
/*向上滑动*/
.FadeInTop{animation:FadeInTop 1.5s forwards;-webkit-animation:FadeInTop 1.5s forwards;-moz-animation:FadeInTop 1.5s forwards;-o-animation:FadeInTop 1.5s forwards;-ms-animation:FadeInTop 1.5s forwards;opacity:0; opacity:1\9;}
/*向下滑动*/
.FadeInBottom{animation:FadeInBottom 1.5s forwards;-webkit-animation:FadeInBottom 1.5s forwards;-moz-animation:FadeInBottom 1.5s forwards;-o-animation:FadeInBottom 1.5s forwards;-ms-animation:FadeInBottom 1.5s forwards;opacity:0; opacity:1\9;}
/*向左滑动*/
.FadeInLeft{animation:FadeInLeft 1.5s forwards;-webkit-animation:FadeInLeft 1.5s forwards;-moz-animation:FadeInLeft 1.5s forwards;-o-animation:FadeInLeft 1.5s forwards;-ms-animation:FadeInLeft 1.5s forwards;opacity:0; opacity:1\9;}
/*向右滑动*/
.FadeInRight{animation:FadeInRight 1.5s forwards;-webkit-animation:FadeInRight 1.5s forwards;-moz-animation:FadeInRight 1.5s forwards;-o-animation:FadeInRight 1.5s forwards;-ms-animation:FadeInRight 1.5s forwards;opacity:0; opacity:1\9;}
/*向下弹跳*/
.BounceTopDown{animation:BounceTopDown 1.5s forwards;-webkit-animation:BounceTopDown 1.5s forwards;-moz-animation:BounceTopDown 1.5s forwards;-o-animation:BounceTopDown 1.5s forwards;-ms-animation:BounceTopDown 1.5s forwards;opacity:0; opacity:1\9;}
/*响铃*/
.Tada{animation:Tada 1.5s forwards;-webkit-animation:Tada 1.5s forwards;-moz-animation:Tada 1.5s forwards;-o-animation:Tada 1.5s forwards;-ms-animation:Tada 1.5s forwards;opacity:0; opacity:1\9;}
	


/*触发Google Chrome动画+++++++++++++++++++++++++++++++++++++++++++++++*/
@-webkit-keyframes FadeInTop{
	0% {transform: translate(0px, 50px);
	}
	100%{ opacity:1;}
		
}
@-webkit-keyframes FadeInBottom{
	0% {transform: translate(0px, -50px);
	}
	100%{ opacity:1;}	
}
@-webkit-keyframes FadeInLeft{
	0% {transform: translate(50px, 0px);
	}
	100%{ opacity:1;}
		
}
@-webkit-keyframes FadeInRight{
	0% {transform: translate(-50px, 0px);
	}
	100%{ opacity:1;}
	
		
}
@-webkit-keyframes BounceTopDown {	
0% { opacity: 0;transform: translate(0px, -50px);}
20%, 50%, 80%, 100% {-webkit-transform:translateY(0); opacity:1;}
40% {transform:translateY(-30px);}
60% {transform:translateY(-15px);}
}

/*响铃*/
@-webkit-keyframes Tada {
0% {
-webkit-transform:scale(1);
transform:scale(1);
}
10%, 20% {
-webkit-transform:scale(0.9) rotate(-3deg);
transform:scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1) rotate(3deg);
transform:scale(1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform:scale(1) rotate(-3deg);
transform:scale(1) rotate(-3deg);
}
100% {
-webkit-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
opacity:1;
}
}



/*触发火狐动画+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@-moz-keyframes FadeInTop{
	0% {transform: translate(0px, 50px);
	}
	100%{ opacity:1;}
		
}
@-moz-keyframes FadeInBottom{
	0% {transform: translate(0px, -50px);
	}
	100%{ opacity:1;}
		
}
@-moz-keyframes FadeInLeft{
	0% {transform: translate(50px, 0px);
	}
	100%{ opacity:1;}
		
}
@-moz-keyframes FadeInRight{
	0% {transform: translate(-50px, 0px);
	}
	100%{ opacity:1;}
	
		
}
@-moz-keyframes BounceTopDown {	
0% { opacity: 0;transform: translate(0px, -50px);}
20%, 50%, 80%, 100% {transform:translateY(0); opacity:1;}
40% {transform:translateY(-30px);}
60% {transform:translateY(-15px);}
}




/*IE触发动画+++++++++++++++++++++++++++++++++++++++++++++++*/
@-ms-keyframes FadeInTop{
	0% {transform: translate(0px, 50px);
	}
	100%{ opacity:1;}
		
}
@-ms-keyframes FadeInBottom{
	0% {transform: translate(0px, -50px);
	}
	100%{ opacity:1;}
		
}
@-ms-keyframes FadeInLeft{
	0% {transform: translate(50px, 0px);
	}
	100%{ opacity:1;}
		
}
@-ms-keyframes FadeInRight{
	0% {transform: translate(-50px, 0px);
	}
	100%{ opacity:1;}
	
		
}
@-ms-keyframes BounceTopDown {	
0% { opacity: 0;transform: translate(0px, -50px);}
20%, 50%, 80%, 100% {transform:translateY(0); opacity:1;}
40% {transform:translateY(-30px);}
60% {transform:translateY(-15px);}
}


/*时间过渡动画=============================================================================================================================*/

/*过渡1*/
.order1 {-webkit-animation-delay:0.1s; -moz-animation-delay:0.1s; -o-animation-delay:0.1s; -ms-animation-delay:0.1s; animation-delay:0.1s;}
.order2 {-webkit-animation-delay:0.3s; -moz-animation-delay:0.3s; -o-animation-delay:0.3s; -ms-animation-delay:0.3s; animation-delay:0.3s;}
.order3 {-webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; -o-animation-delay:0.5s; -ms-animation-delay:0.3s; animation-delay:0.5s;}
.order4 {-webkit-animation-delay:0.7s; -moz-animation-delay:0.7s; -o-animation-delay:0.7s; -ms-animation-delay:0.7s; animation-delay:0.7s;}
.order5 {-webkit-animation-delay:0.9s; -moz-animation-delay:0.9s; -o-animation-delay:0.9s; -ms-animation-delay:0.9s; animation-delay:0.9s;}
.order6 {-webkit-animation-delay:1.1s; -moz-animation-delay:1.1s; -o-animation-delay:1.1s; -ms-animation-delay:1.1s; animation-delay:1.1s;}
.order7 {-webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -o-animation-delay:1.3s; -ms-animation-delay:1.3s; animation-delay:1.3s;}
.order8 {-webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -o-animation-delay:1.5s; -ms-animation-delay:1.5s; animation-delay:1.5s;}
.order9 {-webkit-animation-delay:1.7s; -moz-animation-delay:1.7s; -o-animation-delay:1.7s; -ms-animation-delay:1.7s; animation-delay:1.7s;}
.order10 {-webkit-animation-delay:1.9s; -moz-animation-delay:1.9s; -o-animation-delay:1.9s; -ms-animation-delay:1.9s; animation-delay:1.9s;}
.order11 {-webkit-animation-delay:2.1s; -moz-animation-delay:2.1s; -o-animation-delay:2.1s; -ms-animation-delay:2.1s; animation-delay:2.1s;}
.order12 {-webkit-animation-delay:2.3s; -moz-animation-delay:2.3s; -o-animation-delay:2.3s; -ms-animation-delay:2.3s; animation-delay:2.3s;}
.order13 {-webkit-animation-delay:2.5s; -moz-animation-delay:2.5s; -o-animation-delay:2.5s; -ms-animation-delay:2.5s; animation-delay:2.5s;}
.order14 {-webkit-animation-delay:2.7s; -moz-animation-delay:2.7s; -o-animation-delay:2.7s; -ms-animation-delay:2.7s; animation-delay:2.7s;}
.order15 {-webkit-animation-delay:2.9s; -moz-animation-delay:2.9s; -o-animation-delay:2.9s; -ms-animation-delay:2.9s; animation-delay:2.9s;}

/*淡入淡出动画=============================================================================================================================*/
.transition{	
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition:  0.4s;
-o-transition:  0.4s;
transition:  0.4s;

}
.transition a{	
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition:  0.4s;
-o-transition:  0.4s;
transition:  0.4s;
-webkit-transform:scale(1) rotate(0deg);
transform:scale(1) rotate(0deg);
}


/*自动播放动画=============================================================================================================================*/

/*循环响铃*/
.CycleTada{
	-webkit-animation: rotate 4s linear infinite;
	-moz-animation: rotate 4s linear infinite;
	-o-animation: rotate 4s linear infinite;
	animation: rotate 4s linear infinite;
	
}
	

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg)
}
to {
	-webkit-transform: rotate(360deg)
}
}


/*hover动画=============================================================================================================================*/
.HoverEvert{

	
-webkit-border-radius: 50px;
   -moz-border-radius: 50px;
 -o-border-radius: 50px;

	}
.HoverEvert:hover{
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 transform: rotateY(180deg);	
}